<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建图片投票</title>
    <script src="static/vue.js"></script>
    <script src="static/jquery-1.12.4.js"></script>
    <script src="static/vue-router.js"></script>
    <script src="static/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 60px;
            background-color: rgba(0, 40, 77, 1);
        }

        .container {
            display: flex;
            flex: 1;
        }

        .container .left {
            width: 280px;
            font-size: 16px;
            background-color: rgba(0, 21, 41, 1);
        }

        .leftli {
            margin-top: 20px;
        }

        .leftli img {
            width: 25px;
            height: 25px;
        }

        .leftli {
            font-size: 18px;
        }

        .left img:nth-child(1) {
            margin-left: 10px;
        }

        .left span {
            margin: 0 10px;
        }

        .container .right {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: #fff;
            overflow: hidden;
        }

        .title {
            font-size: 22px;
            color: #fff;
            line-height: 60px;
            margin-left: 26px;
            display: inline-block;
        }

        .header .right {
            float: right;
            height: 60px;
        }

        .header .exit {
            font-size: 14px;
            color: #fff;
            line-height: 60px;
            cursor: pointer;
            margin-right: 16px;
        }

        .header .username {
            color: #fff;
            cursor: pointer;
            margin-right: 25px;
        }

        .touxiang {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #fff;
            position: relative;
            border-radius: 50%;
            top: 12px;
            left: -8px;
            cursor: pointer;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        .menu-title {
            color: #fff;
        }

        .menu-sub-title {
            color: #aeaeae;
        }

        .content1 {
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-top: 20px;
            font-size: 14px;
            font-family: 'Arial Normal', 'Arial';
            display: flex;
            justify-content: space-between;
        }

        .content11 {
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            margin-left: 30px;
        }

        .content12 {
            height: 50px;
            text-align: center;
            color: rgba(0, 0, 0, 0.647058823529412);
        }

        .content12 span {
            line-height: 30px;
            display: inline-block;
            width: 60px;
            height: 30px;
            border-radius: 4px;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            border: 1px solid #d9d9d9;
        }

        .content12 span:nth-child(1) {
            cursor: pointer;
            margin-right: 15px;
        }

        .content12 span:nth-child(2) {
            cursor: pointer;
            margin-right: 15px;
        }

        .content12 span:nth-child(3) {
            cursor: pointer;
            margin-right: 30px;
        }

        .changec {
            color: white;
            background-color: rgba(24, 144, 255, 1);
        }

        .content2 {
            width: 100%;
            margin-top: 30px;

        }

        .content2 div {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 30px auto 0;
        }

        .content2 span {
            width: 80px;
            height: 40px;
            display: inline-block;
            text-align: right;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.847058823529412);
        }

        .content2 input {
            width: 600px;
            height: 40px;
            border: 1px solid #d9d9d9;
            margin-left: 15px;
            padding-left: 15px;
            font-size: 14px;
        }

        .content2 div input:nth-child(3) {
            width: 300px;
            height: 40px;
        }

        input::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.247058823529412);
        }

        .content3 {
            width: 710px;
            height: 40px;
            line-height: 40px;
            display: flex;
            margin: 50px auto;
        }

        .content3 span {
            display: inline-block;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.847058823529412);

        }

        .c3sp1 {
            width: 80px;
            height: 40px;
            text-align: right;
        }
        .c3inp1 {
            width: 300px;
            height: 40px;
            margin-left: 15px;
            border: 1px solid #d9d9d9;
        }
        .c3sp2{
            margin-left: 15px;
        }
        .c3sp3 {
            position: relative;
            display: inline-block;
            width: 150px;
            height: 30px;
            margin-left: 15px;
            margin-top: 5px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #d9d9d9;
        }

        .content34 {
            position: absolute;
            display: inline-block;
            width: 150px;
            height: 30px;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .content4{
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .c41{
            width: 80px;
            height: 40px;
            text-align: right;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.847058823529412);
        }
        .c42{
            width: 600px;
            height: 40px;
            margin-left: 15px;
        }
        .c42 input{
            width: 18px;
            height: 18px;
            margin-left: 10px;
        }
        .content5{
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .c51{
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: right;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.847058823529412);
        }
        .c52{
            width: 600px;
            height: 40px;
            margin-left: 15px;
        }
        .c52 input{
            width: 300px;
            height: 40px;
            padding-left: 15px;
        }
        .c52 i{
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #d9d9d9;
            display: inline-block;
            margin-left: 40px;
            font-family: 'Arial Normal', 'Arial';
        }
        .content7{
            width: 100%;
        }
        .c71{
            width: 130px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #d9d9d9;
            margin: 80px 0  0 450px;
            font-family: 'Arial Normal', 'Arial';
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="title">
            厦门市思明区人民法院投票系统
        </div>
        <div class="right">
                <span class="touxiang">
                    <img class="center" :src="logo" alt="" width="46" height="46">
                </span>
            <span class="username">{{username}}</span>
            <span class="exit">退出</span>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <ul>
                <li v-for="(item,index) in menu">
                    <div @click="subshow(index)" class="leftli">
                        <img src="tpimg/u9.png" alt="">
                        <span class="menu-title">{{item.title}}</span>
                        <img v-if="item.children && item.children.length != 0" src="tpimg/u17.png" alt="">
                    </div>
                    <ul v-if="item.children_show">
                        <li v-for="child in item.children" class="menu-sub-title">
                            {{child.title}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="content">
                <div class="content1">
                    <div class="content11">
                        <span>创建评测打分</span>
                    </div>
                    <div class="content12">
                        <span @click="btn1" :class="{changec:index==0}">发布</span>
                        <span @click="btn2" :class="{changec:index==1}">预览</span>
                        <span @click="btn3" :class="{changec:index==2}">存为模板</span>
                    </div>
                </div>
                <div class="content2">
                    <div>
                        <span>标题:</span><input type="text" placeholder="请输入">
                    </div>
                    <div>
                        <span>投票说明:</span><input type="text" placeholder="请输入">
                    </div>
                    <div>
                        <span>投票人数:</span><input type="text" placeholder="请输入">
                    </div>
                </div>
                <div class="content3">
                    <span class="c3sp1">标准1:</span>
                        <input class="c3inp1" type="text" placeholder="请输入文字" id="fileld">
                        <span class="c3sp2">or</span>
                        <span class="c3sp3" id="textfield">
                            {{filename}}
                            <input class="content34" type="file" nane="file"
                                   @change="filenamechange">
                        </span>
                </div>
                <div class="content4">
                    <div class="c41">选择规则：</div>
                    <div class="c42">
                        <input type="radio" checked="checked">单选
                        <input type="radio">多选
                    </div>
                </div>
                <div class="content5">
                    <div class="c51"><span>子标准11:</span></div>
                    <div class="c52"><input type="text" placeholder="请输入"></div>
                </div>
                <div class="content5">
                    <div class="c51"><span>子标准12:</span></div>
                    <div class="c52"><input type="text" placeholder="请输入"><i>新增子标签</i></div>
                </div>
                <div class="content7">
                    <div class="c71">新增标准</div>
                </div>
            </div>
            <!---------------------------------------------------->
        </div>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            username: "admin",
            logo: 'tpimg/u59.png',
            menu: [],
            index: 0,
            filename:"选择文件"

        },
        methods: {
            subshow(index) {
                this.menu[index].children_show = !this.menu[index].children_show;
            },
            btn1() {
                this.index = 0;
            },
            btn2() {
                this.index = 1;
            },
            btn3() {
                this.index = 2;
            },
            filenamechange(e){
                this.filename=e.target.files[0].name
            }
        },

        created() {
            var _this = this;
            axios.post(
                'https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/index?index=1'
            ).then(function (res) {
                _this.username = res.data.username;
                _this.logo = res.data.logo;
            });
            axios.post('https://mockapi.eolinker.com/xx3S3Ha118800c38fa6132a898e6ee4aabb33b7b96a3587/liebiao?list=1')
                .then(function (res) {
                    _this.menu = res.data;
                })


        }
    })
</script>
</html>